<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('1688授权弹出框')" />
	<th:block th:include="include :: list-css" />
	<style type="text/css">
        .layui-tab-title{border-color: #ccc !important;}
		.layui-this{color: rgb(0, 135, 250) !important;background: none !important;}
        .layui-tab-brief > .layui-tab-title .layui-this:after, .layui-tab-brief > .layui-tab-more li.layui-this:after{border-color:  rgb(0, 135, 250) !important;}
		label.layui-form-label {width: 95px;padding-right: 0px;}
		.layui-form-radio {margin-top:0}
        .mid-content{overflow-y:auto}
		.importTable{empty-cells:show;border-collapse:collapse;border-spacing:0;}
		.listext th{background:#eee;color:#3366cc;}
		.listext th,.listext td{border:solid 1px #ddd;text-align:left;padding:10px;font-size:14px;}
		#importProgress {z-index:20200202;background-color: #000;opacity: 0.3;display:none;}
		.importProgress {width:300px;z-index:20202222;position: fixed;top: 34%;left: 40%;display:none;}
	</style>
</head>
<body>
<div class="main-content">
    <div class="mid-content" style="width:95%;">

        <table class="layui-hide" id="dhtable" lay-filter="ftable"></table>
    </div>
</div>
<!-- 表格头部工作栏-->
<script type="text/html" id="toolbar">
	<div class="layui-btn-container">

        <div class="layui-btn layui-table-tools importbtn-bg sqbtn" lay-event="sqbtn" shiro:hasPermission="storage:productassemble:view">
            <i class="dhicon"></i> 授权
        </div>
		<div class="layui-btn layui-table-tools importbtn-bg wcsqbtn" lay-event="wcsqbtn" shiro:hasPermission="storage:productassemble:view">
            <i class="dhicon"></i> 完成授权
        </div>
        <!-- <div class="layui-btn layui-table-tools importbtn-bg sgzzbtn" lay-event="sgzzbtn" shiro:hasPermission="storage:productassemble:view">
            <i class="dhicon layui-icon-set-fill"></i> 手工组装
        </div> -->

    </div>
</script>



<th:block th:include="include :: footer" />
<th:block th:include="include :: businessJS" />
<!-- <th:block th:include="include :: searchJS" /> -->
<!-- <th:block th:include="listinclude :: list-templeat" /> -->
<script th:inline="javascript">
	var moduleTable='account'
    var ali1688AppKey = [[${ali1688AppKey}]], 
    ali1688EcpApiUrl =[[${ali1688EcpApiUrl}]];
</script>
<script type="text/javascript">
var $,layer,laydate,form,table,wherestr={};
layui.use(['table','laydate','form','layer','jquery','element'], function () {
	$ = layui.$, layer = layui.layer,laydate = layui.laydate , form = layui.form, table = layui.table, element = layui.element;
	var colslist=[
 	            {field: 'resourceOwner',title: '1688账号',width:260,align:'center'},
 	            {field: 'accessToken',title: 'access_token',width:260,align:'center',templet: function(d){
                     return '*******************'}
                },
 	            {field: 'refreshTokenDate',title: '无法刷新授权日期',width:260,align:'center'},
 	        ]
	$.tablelist.init({
		elem: '#dhtable'
		,modalName: "1688账户信息"
		,url: '/system/1688token/list'
		,totalRow: false
		,cols:[colslist]
		,toolbar: '#toolbar'
		,defaultToolbar: [{title:'列设置',layEvent: 'fieldSet',icon: 'layui-icon-set'}] //这里在右边显示
        ,parseData: function(res){ //res 即为原始返回的数据
			var objpage=sessionStorage.getItem(moduleTable+'checkdata')
			if(objpage){
				objpage=JSON.parse(objpage)
				res.data.map((v,i)=>{
					objpage.map((n,m)=>{
						 if(v.guid==n.guid){
							v.LAY_CHECKED=true
						 }
					})
				})
			}
		}
        ,done:function(res, curr, count){
			var ltv=this.elem.next('.layui-table-view');//当前table的dom
			res.data.length || count || ltv.find('.layui-table-header').css('display', 'inline-block');//数量为0时(统计报表存在不传count的情况)，表头赋予样式可拉动
			res.data.length || count || ltv.find('.layui-table-box').css('overflow-x', 'auto');//数量为0时(统计报表存在不传count的情况)，表头赋予样式可拉动
			fixTotal(this);//修复合计行固定列问题
			rowheight(res, curr);//修复合计行固定列问题
			if(typeof listTableDone == 'function')listTableDone();//如果查询列表存在表格加载完成回调事件，则执行
		}
	});
	//监听排序事件 
	table.on('sort(ftable)', function(obj){
		$.tablelist.sort('dhtable',obj);
	});

	// 监听行双击事件
    table.on('rowDouble(ftable)', function (obj) {
        console.log("===========rowDouble ");
        console.log(obj);
		// window.location.href = "/business/productbasis/edit?guid="+obj.data.guid;
		top.layui.index.openTabsPage(prefix+ "/edit?guid="+obj.data.guid,'商品组装方案 - 修改')

    });
    // 多选赋值
    sessionStorage.setItem(moduleTable+'checkdata','')
    table.on('checkbox(ftable)', function(obj){
		var objpage=sessionStorage.getItem(moduleTable+'checkdata')
		if(obj.type=='all'){//判断是否全选
			var objdata=table.checkStatus('dhtable')
			objdata=objdata.data
			if(obj.checked){//判断是否选中
				if(objpage){
					objpage=JSON.parse(objpage)
					objpage=objpage.concat(objdata)
					objpage=newData(objpage)
				}else{
					objpage=objdata
				}
			}else{
				var objpage=JSON.parse(objpage)
				var deldata=table.cache.dhtable
				objpage=delData(objpage,deldata)
			}
			sessionStorage.setItem(moduleTable+'checkdata',JSON.stringify(objpage))
			
		}else{//点击复选框
			if(objpage){
				objpage=JSON.parse(objpage)
				if(obj.checked){
					objpage.push(obj.data)
				}else{
					objpage.map((v,i)=>{
						if(v.guid==obj.data.guid){
							objpage.splice(i,1)
						}
			    	})
			    }
			}else{
				objpage=[]
				objpage.push(obj.data)
			}
			sessionStorage.setItem(moduleTable+'checkdata',JSON.stringify(objpage))
		}
	});
     //头工具栏事件
	$('.zjbcbtn').click(function(){
		  $.post(prefix+'/editpost',{'infoItems':JSON.stringify(table.cache.pdhtable)}, function(res){
			layer.msg(res.msg);
		});
	})



   
	//头工具栏事件
 	table.on('toolbar(ftable)', function(obj){
 	    switch(obj.event){
			case 'sqbtn'://回退
				window.open("https://auth.1688.com/oauth/authorize?client_id="+ali1688AppKey+"&site=1688&redirect_uri="+ali1688EcpApiUrl+"/api/1688/authcallback&state=kjecp","_blank");      
				break;
			case 'wcsqbtn'://回退
			    table.reload('dhtable'); //表格重载
				break;
 	    };
 	});
 });

    // 获取浏览器是否切换界面
    const judgePageChange = (cb) => {
      // 分别兼容：['chrome', '火狐', 'ie']
      // 需要兼容其他浏览器添加参数判断进去就行了
      ['webkitVisibility', 'mozvisibility', 'msvisibility'].forEach(item =>{
		`${item}State` in document && document.addEventListener(`${item.toLowerCase()}change`, () => cb(document[`${item}State`]))
	  })
	   
    }


	judgePageChange((status)=> {
      document.title = status
	//   visible 
    })


</script>
</body>
</html>